<template>
  <div class="home">
    父组件：
    <div id="father">父组件data数据——{{name}}</div>
    <button @click="changeFather">点击修改父组件data</button>
    <hr />
    <div id="son">
      子组件👇
      <Son :data_father="msg" @child-fn="changeFatherAgain"></Son>
      <!-- 绑定自定义属性，在子组件页面中使用props获取该属性名，便可以使用父组件中的这个数据了 -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from '@/components/son.vue'

export default {
  name: 'father',
  data() {
    return {
      name: 'laowang',
      msg: '我是父组件内容'
    }
  },
  methods: {
    changeFather() {
      this.name = this.name === '老王' ? 'laowang' : '老王'
    },
    changeFatherAgain(e) {
      this.name = e
    }
  },
  components: {
    Son
  }
}
</script>
<style>
.home {
  width: 600px;
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 50px;
}
</style>
